<template>
  <div class="print-template-container">
    <div class="nva_box flex_between mb5" style="gap: 20px;">
      <div class="nva_cell flex_row flex1 font_size14 font_black3 cursor_pointer">
        <div @click="scrollToSection('temp-section-copy')" :class="[currentSection === 'temp-section-copy' ? 'active' : '']">
          模板设置
        </div>
        <div @click="scrollToSection('header-section-copy')" :class="[currentSection === 'header-section-copy' ? 'active' : '']">
          表头设置
        </div>
        <div @click="scrollToSection('list-section-copy')" :class="[currentSection === 'list-section-copy' ? 'active' : '']">
          列表设置
        </div>
        <div @click="scrollToSection('footer-section-copy')" :class="[currentSection === 'footer-section-copy' ? 'active' : '']">
          表尾设置
        </div>
      </div>
      <div>
        <el-button type="warning" plain size="mini" @click.stop="printHandle" v-if="isShowPrivew"> 预 览
        </el-button>
        <el-button type="primary" size="mini" @click.stop="submitHandle"> 保 存
        </el-button>
      </div>
    </div>

    <!-- 模板设置 -->
    <div id="temp-section-copy" class="template-section">
      <div class="section-header">
        <h3 class="section-title font_size16 font_black3">模板设置</h3>
      </div>
      <div class="section-content">
        <div class="form-item">
          <label class="form-label">模板名称</label>
          <div class="form-value">
            <el-input v-model="formData.title" placeholder="模板名称" class="font_size16 bold el-input-title"></el-input>
          </div>
        </div>
        <div class="form-item">
          <label class="form-label">纸张尺寸</label>
          <div class="form-value cursor_pointer">
            <el-select v-model="formData.paper_wh" placeholder="请选择" size="mini" style="width: 100%;">
              <el-option v-for="paper_wh in formData.paper_wh_ls" :key="paper_wh.val" :label="paper_wh.title"
                :value="paper_wh.val">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <label class="form-label">打印联数</label>
          <div class="form-value cursor_pointer">
            <el-select v-model="formData.paper_cmp" placeholder="请选择" size="mini" style="width: 100%;">
              <el-option
                v-for="paper in [{ val: '1', title: '1联' }, { val: '2', title: '2联' }, { val: '3', title: '3联' }]"
                :key="paper.val" :label="paper.title" :value="paper.val">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <label class="form-label">字体大小</label>
          <div class="form-value cursor_pointer">
            <el-select v-model="formData.font_size" placeholder="请选择" size="mini" style="width: 100%;">
              <el-option
                v-for="font_size in [{ val: '1', title: '小' }, { val: '2', title: '中' }, { val: '3', title: '大' }]"
                :key="font_size.val" :label="font_size.title" :value="font_size.val">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 表头设置 -->
    <div id="header-section-copy" class="template-section">
      <div class="section-header">
        <h3 class="section-title font_size16 font_black3">表头设置</h3>
      </div>
      <div class="section-content">
        <div class="checkbox-item" v-for="(head, hIndex) in formData.head" :key="'_head' + hIndex">
          <div class="checkbox-wrapper">
            <el-checkbox v-model="head.on" class="custom-checkbox" :true-label="1" :false-label="2">
              <span class="checkbox-label">{{ head.txt }}</span>
            </el-checkbox>
          </div>
          <div class="item-action cursor_pointer" v-if="['logo'].includes(head.col)" style="justify-content: flex-end">
            <div class="flex_row" @click="uploadPhotosDiglog({ type: head.col, index: hIndex, val2: head.val2 })">
              <div>
                <img v-if="head.val2" :src="head.val2" style="height: 30px;width: 30px;border-radius: 50%;">
                <i v-else class="el-icon-picture-outline font_black9"></i>
              </div>
              <i class="el-icon-arrow-right font_black9 ml10"></i>
            </div>
          </div>
          <div class="item-action cursor_pointer" v-if="['tb_title', 'tb_title2'].includes(head.col)">
            <el-input size="mini" v-model="head.val" placeholder="请输入内容"></el-input>
          </div>
          <div class="item-action cursor_pointer" v-if="['address'].includes(head.col)">
            <el-popover placement="top" width="450" v-model="visibleAddr" style="width: 100%;">
              <div style="height: 300px;overflow-y: auto;">
                <div v-for="adr in store_list" :key="adr.id" @click="addrHandle(hIndex, adr)"
                  :class="['popo-addr', { 'font_bule': addrCurrnet && (addrCurrnet.id == adr.id) }]">
                  <p class="bold"> {{ adr.name || '' }} </p>
                  <p> {{ adr.district || '' }} {{ adr.address || '' }} </p>
                </div>
              </div>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visibleAddr = false">取消</el-button>
                <el-button type="primary" size="mini" @click="addAddress">确定</el-button>
              </div>
              <div class="flex_row" slot="reference" style="justify-content: flex-end;">
                <div @click="getStoreList">
                  <span v-if="head.val"> {{ head.val }} </span>
                  <span v-else> 选择地址 </span>
                </div>
                <i class="el-icon-arrow-right font_black9 ml10"></i>
              </div>
            </el-popover>
          </div>
          <div class="item-action cursor_pointer" v-if="['title1', 'title2', 'title3'].includes(head.col)">
            <el-input size="mini" v-model="head.val" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
    </div>

    <!-- 列表设置 -->
    <div id="list-section-copy" class="template-section">
      <div class="section-header">
        <div class="flex_between">
          <h3 class="section-title font_size16 font_black3">列表设置</h3>
          <span class="">对已选择列设置宽度，剩余宽度：<span :class="['font_size16', 'font_size16']">{{ 100 - l_width > 0 ? 100 -
            l_width : 0 }}%</span></span>
        </div>
      </div>
      <div class="section-content flex_row" style="align-items: flex-start;padding: 0;">
        <div class="section-content-left">
          <div class="checkbox-item" v-for="(body, bIndex) in formData.body" :key="'_body' + bIndex"
            v-if="body.col != 'attrmix'">
            <div class="flex_between" style="width: 100%;">
              <el-checkbox v-model="body.on" class="custom-checkbox" :true-label="1" :false-label="2">
                <div class="txt-name">{{ body.txt }}</div>
              </el-checkbox>
              <div class="item-action cursor_pointer ml10" v-if="['unit_title'].includes(body.col)">
                <el-select v-model="body.vset" placeholder="请选择地址" size="mini" style="width: 100%;">
                  <el-option v-for="unit in [{ val: '1', title: '显示换算' }, { val: '', title: '不显示换算' }]" :key="unit.val"
                    :label="unit.title" :value="unit.val">
                  </el-option>
                </el-select>
              </div>
              <div class="item-action cursor_pointer ml10" v-if="['spec_title'].includes(body.col)">
                <el-select v-model="body.vset" placeholder="请选择地址" size="mini" style="width: 100%;">
                  <el-option v-for="spec in [{ val: '2', title: '分红打印多规格' }, { val: '1', title: '合并打印多规格' }]"
                    :key="spec.val" :label="spec.title" :value="spec.val">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="section-content-right">
          <div class="checkbox-item" v-for="(body, bIndex) in formData.body" :key="'_body' + bIndex"
            v-if="body.on == 1 || body.col == 'attrmix'">
            <div class="flex_between" style="width: 100%;">
              <div class="flex_row">
                <div class="txt-name mr10">{{ body.txt }}</div>
                <div v-if="body.col == 'attrmix'">
                  <el-switch v-model="body.vset" @change="changeSetv(bIndex, $event)" :active-value="1"
                    :inactive-value="2" active-color="#409eff" inactive-color="#c0ccda" />
                </div>
              </div>
              <div>
                <el-input-number size="small" v-model="body.w" controls-position="right" :step="1" :min="1"
                  :max="max_width + body.w" :disabled="disAws && disCols.includes(body.col)"></el-input-number>
                <span>（%）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表尾设置 -->
    <div id="footer-section-copy" class="template-section">
      <div class="section-header">
        <h3 class="section-title font_size16 font_black3">表尾设置</h3>
      </div>
      <div class="section-content">
        <div class="checkbox-item" v-for="(foot, fIndex) in formData.foot" :key="'_foot' + fIndex">
          <div class="checkbox-wrapper">
            <el-checkbox v-model="foot.on" class="custom-checkbox" :true-label="1" :false-label="2">
              <span class="checkbox-label">{{ foot.txt }}</span>
            </el-checkbox>
          </div>
          <div class="item-action cursor_pointer" v-if="['logo'].includes(foot.col)" style="justify-content: flex-end">
            <div class="flex_row">
              <div>
                <i class="el-icon-picture-outline font_black9"></i>
              </div>
              <i class="el-icon-arrow-right font_black9 ml10"></i>
            </div>
          </div>
          <div class="item-action cursor_pointer" v-if="['tb_title', 'tb_title2'].includes(foot.col)">
            <el-input size="mini" v-model="foot.val" placeholder="请输入内容"></el-input>
          </div>
          <div class="item-action cursor_pointer" v-if="['unit_title'].includes(foot.col)">
            <el-select v-model="foot.val" placeholder="请选择地址" size="mini" style="width: 100%;">
              <el-option v-for="unit in [{ val: '1', title: '显示换算' }, { val: '2', title: '不显示换算' }]" :key="unit.val"
                :label="unit.title" :value="unit.val">
              </el-option>
            </el-select>
          </div>
          <div class="item-action cursor_pointer" v-if="['spec_title'].includes(foot.col)">
            <el-select v-model="foot.val" placeholder="请选择地址" size="mini" style="width: 100%;">
              <el-option v-for="spec in [{ val: '1', title: '分红打印多规格' }, { val: '2', title: '合并打印多规格' }]"
                :key="spec.val" :label="spec.title" :value="spec.val">
              </el-option>
            </el-select>
          </div>
          <div class="item-action cursor_pointer" v-if="['title1', 'title2', 'title3'].includes(foot.col)">
            <el-input size="mini" v-model="foot.val" placeholder="请输入内容"></el-input>
          </div>
          <div class="item-action cursor_pointer" v-if="['qrcode1', 'qrcode2', 'qrcode3'].includes(foot.col)"
            style="justify-content: flex-end">
            <div class="flex_row" @click="uploadPhotosDiglog({ type: foot.col, index: fIndex, val2: foot.val2 })">
              <div>
                <img v-if="foot.val2" :src="foot.val2" style="height: 30px;width: 30px;border-radius: 50%;">
                <i v-else class="el-icon-picture-outline font_black9"></i>
              </div>
              <i class="el-icon-arrow-right font_black9 ml10"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <UploadPhotosDiglog ref="uploadPhotosRef" @update:photoList="updatePhotoList" :maxLimit="1"></UploadPhotosDiglog>
  </div>
</template>

<!-- 字段输入类型由前端锁死：
* 1.'logo'，'qrcode1'，'qrcode2'，'qrcode3'，=图片类型
* 2.'tb_title'，'tb_title2'=输入类型
* 3.'address'=地址选择类型（可单选企业地址和各门店地址）
* 4.'title1'、'title2'，'title2'=输入类型
* 5.'spec_title'=选择类型（分红打印多规格/合并打印多规格）
* 6'unit_title'=选择类型（显示换算/不显示换算）
* 7.剩余字段=其他类型（不可输入，数据来自系统） -->

<!-- 
  customForm.vue 和 customFormCopy.vue 
  文件所有内容一样，但是用到动态加载组件，
  在  pages\setting\module\basicSetting\components.vue 获取class 定位导致获取的是 customForm.vue
  无法获取正确class 
  所以在修改，customForm.vue 文件后，复制一份到 customFormCopy.vue，修改头部导航class
-->

<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  nextTick,
  defineExpose,
  computed,
  defineProps,
  getCurrentInstance,
  defineEmits,
  inject,
  watch
} from '@vue/composition-api'
const { proxy } = getCurrentInstance()
import config from "@/js/conf/Config.js"
import staticConst from "@/js/const/StaticConst.js";
import printCtrl from "@/js/print/PrintCtrl.js";
import https from "@/js/https/Https.js";
import UploadPhotosDiglog from "@/components/commV2/UploadPhotosDiglog/index.vue";

// 定义props
const props = defineProps({
  currentMenu: {
    type: Object,
    default: () => { }
  },
  propData: {
    type: Object,
    default: () => { }
  },
  print_tpl_id: {
    type: [String, Number],
    default: ''
  },
  isShowPrivew: {
    type: Boolean,
    default: true
  },
})

watch(() => props.print_tpl_id, (newValue) => {
  if (newValue) {
    getPrintTplDetail(newValue)
  }
}, { deep: true })

// 如果合并属性开启，则不算一下属性宽度
const disCols = ref(['gdname', 'item_no', 'barcode', 'brand', 'cattitle'])
const l_width = computed(() => {
  if (!formData.value.body || !Array.isArray(formData.value.body)) return 0;
  // 检查是否有 item.col == 'attrmix' && item.vset == 1 的情况
  const hasAttrmixWithVset1 = formData.value.body.some(item => item.col == 'attrmix' && item.vset == 1);
  return formData.value.body.reduce((sum, item) => {
    // 只有当item.on === 1时才考虑是否累加宽度
    if (item.on == 1) {
      // 如果有attrmix且vset为1的情况，并且当前列在disCols中，则跳过
      if (hasAttrmixWithVset1 && disCols.value.includes(item.col)) {
        return sum;
      }
      return sum + (Number(item.w) || 0);
    }
    return sum;
  }, 0);
})

const max_width = computed(() => {
  return 100 - l_width.value > 0 ? 100 - l_width.value : 0;
})

const disAws = computed(() => {
  if (!formData.value.body || !Array.isArray(formData.value.body)) return 0;
  for (let index = 0; index < formData.value.body.length; index++) {
    const element = formData.value.body[index];
    if (element.col == 'attrmix' && element.vset == 1) {
      return true;
    }
  }
})

// 保存表单
const submitHandle = async () => {
  let form = { ...formData.value }
  form.head = form.head.filter(item => item.on == 1)
  form.foot = form.foot.filter(item => item.on == 1)
  form.body = form.body.filter(item => item.on == 1 || item.col == 'attrmix')
  let data = {
    ...form,
  }
  let res = await proxy.$api({ url: config.compset_print_tpl_save, data });
  if (res.status == 1) {
    proxy.$message({
      message: '保存成功',
      type: 'success',
    })
    proxy.$eventBus.$emit('compsetPrintTplSave', { id: res?.data })
  } else {
    proxy.$message({
      message: res.msg || '保存失败',
      type: 'error',
    })
  }
}

const uploadPhotosRef = ref(null);
const uploadPhotosDiglog = (data) => {
  let d = { config: { ...data }, list: data.val2 ? [{ url: data.val2 }] : [] }
  uploadPhotosRef.value.show(d)
}

const updatePhotoList = (data) => {
  let d = data
  if (d.config.type == 'logo') {
    formData.value.head[d.config.index].val2 = data.list[0]?.url;
    formData.value.head[d.config.index].val = data.list[0]?.name;
  } else if (['qrcode1', 'qrcode2', 'qrcode3'].includes(d.config.type)) {
    formData.value.foot[d.config.index].val2 = data.list[0]?.url;
    formData.value.foot[d.config.index].val = data.list[0]?.name;
  }
}

const changeSetv = (i, e) => {
  formData.value.body[i].vset = e;
}

const visibleAddr = ref(false);
const addrCurrnet = ref({});
const addrIndex = ref('');
const store_list = ref([]);
const getStoreList = async () => {
  let param = {
    status: 0,
  };
  let res = await proxy.$api({ url: config.SHOP_LS, data: param });
  if (res.status == 1 && res.data) {
    store_list.value = res.data;
  }
}
const addrHandle = (i, adr) => {
  addrIndex.value = i;
  addrCurrnet.value = adr;
}

const addAddress = () => {
  formData.value.head[addrIndex.value].val = (addrCurrnet.value.district || '') + (addrCurrnet.value.address || '');
  visibleAddr.value = false;
  addrIndex.value = '';
}

const printHandle = () => {
  let data = {};
  data.type = formData.value?.type;
  data.cpid = formData.value?.cpid;
  data.orderId = formData.value?.id;
  data.type_od = 1;
  data.url = config.PRINT_URL;
  data.pview = 1;
  printCtrl.print(data);
}


const formData = ref({})
// 打印模板详情
const getPrintTplDetail = async (id) => {
  formData.value = {}
  try {
    let res = await proxy.$api({ url: config.compset_print_tpl_get, data: { id } })
    if (res.status == 1) {
      let result = res.data
      // 检查并处理attrmix元素位置
      if (result.body && Array.isArray(result.body)) {
        const attrmixIndex = result.body.findIndex(vm => vm.col == 'attrmix')
        if (attrmixIndex !== -1 && attrmixIndex !== 1) {
          // 将attrmix元素移到数组第二个位置
          const attrmixItem = result.body.splice(attrmixIndex, 1)[0]
          result.body.splice(1, 0, attrmixItem)
        }
      }
      result.body = result.body.map(vm => {
        return {
          ...vm,
          w: Number(vm.w) || 1
        }
      })
      formData.value = result
    }
  } catch (error) { }
}

// 定义处理函数
const handleAddTplDetail = async () => {
  try {
    let res = await proxy.$api({
      url: config.compset_print_tpl_2add, data: {
        type: props.currentMenu.id
      }
    })
    if (res.status == 1) {
      let result = res.data
      result.paper_type = result.paper_type.toString()
      result.font_size = result.font_size.toString()
      formData.value = result
    }
  } catch (error) { }
}

defineExpose({
  getPrintTplDetail,
  handleAddTplDetail,
})

const currentSection = ref('temp-section-copy')
const isProgrammaticScroll = ref(false)

const scrollToSection = (sectionId) => {
  // 立即更新当前激活的导航项
  currentSection.value = sectionId
  // 设置标志，表示正在进行程序化滚动
  isProgrammaticScroll.value = true

  nextTick(() => {
    const section = document.getElementById(sectionId)
    const navigation = document.querySelector('.nva_box')
    if (section && navigation) {
      const scrollContainer = findScrollContainer(section)
      const navigationHeight = navigation.offsetHeight
      if (scrollContainer) {
        // 使用 offsetTop 方法计算目标位置
        let targetOffsetTop = section.offsetTop
        let parentElement = section.offsetParent
        // 向上遍历，累计所有偏移量，直到找到滚动容器
        while (parentElement && parentElement !== scrollContainer) {
          targetOffsetTop += parentElement.offsetTop
          parentElement = parentElement.offsetParent
        }
        const finalScrollPosition = targetOffsetTop - navigationHeight - 20
        const targetPosition = Math.max(0, finalScrollPosition)
        try {
          scrollContainer.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
          })
        } catch (error) {
          // 方式2: 直接设置 scrollTop
          scrollContainer.scrollTop = targetPosition
        }

        // 验证滚动是否成功
        setTimeout(() => {
          if (Math.abs(scrollContainer.scrollTop - targetPosition) > 10) {
            // 备用方案：尝试使用父容器滚动
            let alternativeContainer = scrollContainer.parentElement
            while (alternativeContainer && alternativeContainer !== document.body) {
              const style = window.getComputedStyle(alternativeContainer)
              if ((style.overflow === 'auto' || style.overflow === 'scroll' ||
                style.overflowY === 'auto' || style.overflowY === 'scroll') &&
                alternativeContainer.scrollHeight > alternativeContainer.clientHeight) {
                alternativeContainer.scrollTo({
                  top: targetPosition,
                  behavior: 'smooth'
                })
                break
              }
              alternativeContainer = alternativeContainer.parentElement
            }
          }
          isProgrammaticScroll.value = false
        }, 500)

      } else {
        console.warn('未找到滚动容器，无法进行锚点定位')
        isProgrammaticScroll.value = false
      }
    } else {
      console.warn('未找到目标元素或导航元素')
      isProgrammaticScroll.value = false
    }
  })
}

const handleScroll = () => {
  // 如果是程序化滚动，不更新当前激活的导航项
  if (isProgrammaticScroll.value) {
    return
  }
  const sections = ['temp-section-copy', 'header-section-copy', 'list-section-copy', 'footer-section-copy']
  const navigation = document.querySelector('.nva_box')
  // 统一使用外部已定义的scrollContainer变量，避免重复查找
  const firstSection = document.getElementById(sections[0])
  const scrollContainer = firstSection ? findScrollContainer(firstSection) : null
  const containerRect = scrollContainer ? scrollContainer.getBoundingClientRect() : null
  if (navigation && scrollContainer && containerRect) {
    const navigationBottom = navigation.getBoundingClientRect().bottom
    for (let i = sections.length - 1; i >= 0; i--) {
      const section = document.getElementById(sections[i])
      if (section) {
        const sectionRect = section.getBoundingClientRect()
        const sectionTop = sectionRect.top
        // 优化判断条件，使定位更准确
        const threshold = scrollContainer ? navigationBottom - containerRect.top + 20 : navigationBottom
        if (sectionTop <= threshold) {
          currentSection.value = sections[i]
          break
        }
      }
    }
  }
}

const findScrollContainer = (element) => {
  let parent = element.parentElement
  while (parent && parent !== document.body) {
    // 优先检查自定义的 drawer 内容容器
    if (parent.classList.contains('drawer-content-wrapper')) {
      return parent
    }
    // 检查 Element UI drawer 相关容器
    if (parent.classList.contains('el-drawer__body') ||
      parent.classList.contains('el-drawer__container') ||
      parent.classList.contains('el-drawer__wrapper') ||
      parent.classList.contains('el-drawer')) {
      return parent
    }
    const { overflow, overflowY } = window.getComputedStyle(parent)
    if (overflow === 'auto' || overflow === 'scroll' ||
      overflowY === 'auto' || overflowY === 'scroll') {
      return parent
    }
    parent = parent.parentElement
  }

  // 全局查找策略
  const searchSelectors = [
    '.drawer-content-wrapper',
    '.el-drawer__body',
    '.el-drawer__container'
  ]

  for (const selector of searchSelectors) {
    const container = document.querySelector(selector)
    if (container) {
      console.log(`通过全局查找找到容器: ${selector}`)
      return container
    }
  }
  return null
}

let scrollContainer = null
onMounted(() => {
  // 在 drawer 环境中需要延迟更长时间确保 DOM 完全渲染
  setTimeout(() => {
    const firstSection = document.getElementById('temp-section-copy')
    scrollContainer = firstSection ? findScrollContainer(firstSection) : null
    if (scrollContainer) {
      scrollContainer.addEventListener('scroll', handleScroll, { passive: true })
    } else {
      window.addEventListener('scroll', handleScroll, { passive: true })
      console.log('绑定滚动事件到 window')
    }
    handleScroll() // 初始化
  }, 300) // 增加延迟时间，确保 drawer 完全渲染
})

onBeforeUnmount(() => {
  if (scrollContainer) {
    scrollContainer.removeEventListener('scroll', handleScroll)
  } else {
    window.removeEventListener('scroll', handleScroll)
  }
  scrollContainer = null
})

</script>

<style scoped lang="scss">
.print-template-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding-right: 10px;
  position: relative;
}

.template-section {
  margin-bottom: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.section-header {
  background-color: #f5f7fa;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.section-title {
  margin: 0;
}

.section-content {
  padding: 0 20px;
}

.section-content-left,
.section-content-right {
  padding: 0 10px;
  box-sizing: border-box;
  width: 50%;
}

.section-content-left {
  border-right: 1px solid #e0e0e0;
}

.template-info {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.template-name {
  font-size: 18px;
  font-weight: bold;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  flex: 0 0 150px;
  color: #333;
}

.form-value {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

/* 复选框样式 */
.checkbox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  border-bottom: 1px solid #f0f0f0;

  .txt-name {
    width: 110px;
  }
}

.checkbox-item:last-child {
  border-bottom: none;
}

.checkbox-wrapper {
  width: 150px;
}

.checkbox-label {
  color: #333;
}

.item-action {
  display: flex;
  align-items: center;
  color: #666;
  flex: 1;
  height: 40px;
}

.form-item,
.item-action {
  ::v-deep .el-input__inner {
    border: none !important;
    border-radius: 0 !important;
    padding-left: 6px !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }
}

.popo-addr {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px;
}

.el-input-title {
  ::v-deep .el-input__inner {
    color: #3388ff !important;
  }
}

/* 选项卡样式 */
.tab-section {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.tab-header {
  background-color: #f5f7fa;
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  color: #666;
}

.tab-item.active_tab {
  background-color: #fff;
  border-bottom: 2px solid #3388ff;
  color: #3388ff;
  font-weight: bold;
}


/* 宽度设置样式 */
.remaining-percentage {
  color: #666;
  text-align: right;
}

.width-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.width-setting-item:last-child {
  border-bottom: none;
}

.width-label {
  flex: 0 0 120px;
  color: #333;
}

.width-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #666;
}

.percentage {
  margin-left: 5px;
}

.width-action {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.nva_box {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 100;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 10px;
}

.nva_cell {
  gap: 20px;
}

.nva_box .nva_cell>div {
  transition: color 0.3s;
}

.nva_box .nva_cell>div:hover {
  color: #3388ff;
}

.nva_box .nva_cell>div.active {
  color: #3388ff;
  font-weight: bold;
  position: relative;
}

.nva_box .nva_cell>div.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #3388ff;
}

.container-footer {
  border-top: 1px solid #f1f1f1;
  margin-top: 10px;
  padding: 14px 10px 4px;

  .summary-info {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .action-buttons {
    display: flex;
    gap: 12px;

    .btn-cancel {
      border-color: #cbd5e1;
      color: #64748b;
    }

    .btn-confirm {
      background-color: #3b82f6;
      border-color: #3b82f6;
    }
  }
}
</style>